<template>
  <div class="contain" v-loading="loading">
		<tz-breadcrumb  :pathArr='[{"name": "场景管理"},{"name": "餐厅管理", "url": "/home"},{"name": "餐品信息及管理", "url": "/restaurant-info-manage"}]'></tz-breadcrumb>
		<!-- 餐品信息及管理 -->
    <div class="add-restaurant">餐品信息及管理</div>
    <!-- 新增分类封装成组件 -->
    <new-classification  topicTitle="餐品分类管理" modelType="1" @getChildData='getChildData' @getChildMListClassActive='getChildMListClassActive'/>
    <!-- :classificatList="mList" -->
    <!-- 餐品管理 -->
    <div class="manage">
      <div class="manage-info">
        <span class="dish-info">餐品管理</span>
        <div class="grid-content text-right add-btn-restaurant" @click="addMealFood"><i class="el-icon-plus"></i>新增菜品</div>
      </div>
      <!-- 时间菜品表 -->
      <div class="food-table">
        <!-- <span class="food-table-time">2019.04.25周四 11:00～16:00 菜品表</span> -->
        <!-- css绘画三角形 -->
        <!-- <span class="san_xia"></span> -->
        <select class="food-table-time">
          <option value ="volvo">2019.04.01 11:00～14:00</option>
          <option value ="saab">2019.04.01 14:00～16:00</option>
          <option value="opel">2019.04.01 16:00～18:00</option>
          <option value="audi">2019.04.01 18:00～21:00</option>
        </select>
      </div>
      <!-- 菜品分类列表 -->
      <div class="select-menu-main">
        <div class="left text-center">
          <div class="leftline" v-for="(item,index) in mList" :key="item.id" :class="[mListClassActive == index? 'active-menu':'']" @click="mListClassClick(index)">{{item.title}}
            <div class="category-nums" v-if='item.num > 0'>   1         
            </div>
          </div>
        </div>
          <div class="right" v-if="mList.length > 0">
            <div class="menu-list" v-for='item in (mList[mListClassActive].goods)' :key="item.id">
                <img :src="imgUrl + item.goods_img" class="menu-top-img">
                <div class="menu-list-main">
                  <div class="menu-list-main-title">{{item.goods_name}}</div>
                  <div class="menu-list-last-nub">
                    剩余<span class="number">{{item.number}}</span>份
                  </div>
                </div>
                <img src="./../../public/img/ic_menuyellow.png" alt="" class="posi-img" @click="updataMealFood(item.id,item.cid,item.goods_name,item.price,item.number,item.goods_img,item.kitchen_id,item.recommend,item.putaway)">
            </div>
          </div>
      </div>
    </div>
    <!-- 确定、取消按钮 -->
    <!-- <div class="mark-btn">
      <div class="btn">
        <div class="determine btn-type">确定</div>
        <div class="cancle btn-type">取消</div>
      </div>
    </div> -->
    <!-- 添加/修改菜品对话框 -->
    <el-dialog :title="foodType==1?'添加菜品':'修改菜品'" top="157px"  custom-class="dialog-show" :visible.sync="dialogFormVisible" style="border:1px solid green">
      <div class="dialog-border">
        <!-- 边界线 -->
        <div style="border:0.5px solid #D8D8D8;"></div>
        <!-- 当前时段 -->
        <div class="current-time" v-show="foodType==2">当前时段：2019.04.25周四 11:00～16:00</div>
        <!-- 餐品分类名称 -->
        <div class="bor-area">
          <div :class=" foodType==2?'bor-width bor-area-title':'bor-area-title' " style="">餐品分类名称</div>
          <el-select v-model="restaurantInfo.currentGoodsCid" placeholder="点击选择餐品分类名称">
            <el-option
              size="medium"
              v-for="item in mList"
              :key="item.title"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>
          <span v-show="foodType==2" class="dialog-tip">注：餐品分类不受时段影响</span>
        </div>
        <!-- 厨房分类名称 -->
        <div class="bor-area">
          <div :class=" foodType==2?'bor-width bor-area-title':'bor-area-title' " style="">厨房分类名称</div>
          <el-select v-model="restaurantInfo.currentCkid" placeholder="点击选择厨房分类名称">
            <el-option
              size="medium"
              v-for="item in cList"
              :key="item.index"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>
          <span v-show="foodType==2" class="dialog-tip">注：餐品分类不受时段影响</span>
        </div>
        <!-- 餐品名称 -->
        <div class="bor-area">
           <div :class=" foodType==2?'bor-width bor-area-title':'bor-area-title' ">餐品名称</div>
           <el-input style="width:300px;"  v-model="restaurantInfo.name" placeholder="请输入餐品名称"></el-input>
           <span v-show="foodType==2" class="dialog-tip">注：餐品分类不受时段影响</span>
        </div>
        <!-- 常规库存 -->
        <div class="bor-area">
           <div :class=" foodType==2?'bor-width bor-area-title':'bor-area-title' ">{{foodType==1?'常规库存':'修改当前时段库存'}}</div>
           <el-input style="width:300px;"  v-model="restaurantInfo.nub" placeholder="请输入数量"></el-input>
           <span v-show="foodType==2" class="dialog-tip">注：仅修改当前时段内的库存数</span>
        </div>
        <!-- 价格 -->
        <div class="bor-area">
           <div :class=" foodType==2?'bor-width bor-area-title':'bor-area-title' ">价格</div>
           <el-input style="width:300px;"  v-model="restaurantInfo.price" placeholder="请输入价格"></el-input><span style="margin-left:5px;">元</span>
           <!-- <span v-show="foodType==2" class="dialog-tip">注：仅修改当前时段内的库存数</span> -->
        </div>
        <!-- 是否推荐 -->
        <div class="recommend bor-area">
           <div :class=" foodType==2?'bor-width bor-area-title isrecommend':'bor-area-title isrecommend' " >是否推荐</div>
           <!-- class="bor-area-title isrecommend" -->
           <el-radio v-model="restaurantInfo.radioRecommend" label="1">推荐</el-radio>
           <el-radio v-model="restaurantInfo.radioRecommend" label="0">不推荐</el-radio>
        </div>
        <!-- 是否上架 -->
        <div class="recommend bor-area" >
           <div :class=" foodType==2?'bor-width bor-area-title isrecommend':'bor-area-title isrecommend' " >是否上架</div>
           <!-- class="bor-area-title isrecommend" -->
           <el-radio v-model="restaurantInfo.putaway" label="1">上架</el-radio>
           <el-radio v-model="restaurantInfo.putaway" label="0">不上架</el-radio>
        </div>
        <!-- 餐品图片 -->
        <div class="bor-area">
            <div :class=" foodType==2?'bor-width bor-area-title':'bor-area-title' ">餐品图片</div>
            <div class="img-border text-center">
              <img  :src="showImg +  img" class="imgshow" v-if="img != ''"/>
              <span v-if="img == ''">+</span>
              <!-- <p v-if="img == ''">添加证照</p> -->
              <input type="file" name=""  class="avatar-uploader" multiple="false"  @change="fileChange($event,'img')" >
            </div>

        </div>
        <div class="dialog-btn-area">
            <div v-show="foodType==2" class="dialog-btn-delete dialog-make-sure" @click="deleteGoods">删除</div>
            <div class="dialog-btn-sure dialog-make-sure" @click="sureModify">确 定</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue'	
import newClassification from './../../components/newClassification/newClassification'
export default {
  components: {
    'tz-breadcrumb': tzBreadcrumb,
    'new-classification': newClassification
  },
  data () {
    return {
      showImg:'http://foodapi.jimanke.com/',
      loading:false,
      restaurantInfo:{
        name:'',
        nub:'',
        radioRecommend: '0',
        putaway:'1',
        currentGoodsCid:'',
        price:'',
        // 厨房分类
        currentCkid:''
      },
      img:'',
      imgUrl:api.imgUrl,
      // showImg: api.imgUrl + api.showImg,
      tabPosition: 'left',
      show: 'show',
      dialogFormVisible: false,
      width: '100%',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      radio: 1,
      imageUrl: '',
      // 当classification=2时为设置餐桌
      mList: '',
      //厨房分类
      cList:[],
      // 默认食品分类选中样式
      mListClassActive:0,
      // 区分新增餐品(1)和修改餐品(2)
      foodType: 2,
      formLabelWidth: '120px',
      // 当前点击的商品id
      currentGoodsId:'',
    }
  },
  created () {
    
  },
  mounted ()  {
    var that = this;
    that.getGoodsAllList();
    that.getkitchenList()
  },
  methods: {
    fileChange (event, img) {
      var fileList = event.target.files;
     // console.log(fileList)  //FileList {0: File(38733), length: 1}
     // console.log(fileList[0]) //File(38733)
      http.upImg('/dinner/images/upload', {
       file: fileList[0] 
      }, response => {
        console.log('成功响应')
        // console.log(response)
        this[img] = response.data[0].path;
        // 保存头像路径，提交表单的时候用
        this.avatarImg = response.data[0].path;
        // console.log(response.data[0].path)
        // console.log(this);
      }, err => {
        console.log(err);
      });
    },
    // 删除商品
    deleteGoods() {
      var that = this;
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        console.log(1);
        // 关闭弹框
        that.dialogFormVisible = false;
        that.loading = true;
        // 修改菜品接口对接
        http.post(api.goodsDel, {
          id:that.currentGoodsId,
        }, (res) => {
          console.log(res);
          that.loading = false;
          if(res.code == 10001) {
            this.$message({
              type: 'success',
              message: '删除菜品成功!'
            });
            that.getGoodsAllList();
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            });
          }
        }, () => {
          that.loading = false;
          console.log('网络错误');
        });
        
      }).catch(() => {
        console.log(2);
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
        // 关闭弹框
        this.dialogFormVisible = false;
      }); 
    },
    // 增加/修改商品
    sureModify () {
      var that = this;
      if (that.foodType == 1) {
        if(that.restaurantInfo.currentGoodsCid !='' && that.restaurantInfo.currentCkid !='' && that.restaurantInfo.name !='' && that.restaurantInfo.nub !='' && that.restaurantInfo.price !='' && that.img != ''){
          console.log('齐了啊')

          that.$confirm('确认新增菜品吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            http.post(api.goodsAdd,{
            seller_id:localStorage.getItem("seller_id"),//api.seller_id,
            restaurant_id: that.$route.query.id,
            goods_name:that.restaurantInfo.name,
            recommend:that.restaurantInfo.radioRecommend,
            cid:that.restaurantInfo.currentGoodsCid,
            kitchen_id: that.restaurantInfo.currentCkid,
            goods_img:that.img,
            price:that.restaurantInfo.price,
            number:that.restaurantInfo.nub,
            // 必填项
            sales_volume:'22',
            desc:'说明',
            putaway:that.restaurantInfo.putaway
            },(res) => {
              console.log(res)
              if(res.code == 10003) {
                this.$message({
                  type: 'warning',
                  message: res.msg
                });
              }
              if(res.code == 10001) {
                this.$message({
                  type: 'success',
                  message: '新增菜品成功!'
                });
                this.dialogFormVisible = false;
                this.getGoodsAllList();
              }
            },(err) => {
              console.log(err)
              this.dialogFormVisible = false;
          })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消新增菜品'
            });
            this.dialogFormVisible = false;
          })
        }else{
          if(that.restaurantInfo.currentGoodsCid =='') {
            this.$message({
                type: 'warning',
                message: '缺少餐品分类名称'
            });
            return false
          }
          if(that.restaurantInfo.currentCkid =='') {
            this.$message({
                type: 'warning',
                message: '缺少厨房分类名称'
            });
            return false
          }
          if(that.restaurantInfo.name =='') {
            this.$message({
                type: 'warning',
                message: '缺少餐品名称'
            });
            return false
          }
          if(that.restaurantInfo.nub =='') {
            this.$message({
                type: 'warning',
                message: '缺少库存数量'
            });
            return false
          }
          if(that.restaurantInfo.price =='') {
            this.$message({
                type: 'warning',
                message: '缺少商品价格'
            });
            return false
          }
          if(that.img =='') {
            this.$message({
                type: 'warning',
                message: '缺少餐品图片'
            });
            return false
          }
        }
        // 当为修改菜品时候的操作
      }else if(that.foodType == 2) {
        this.$confirm('确认修改吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
          }).then(() => {
          console.log(1);
          // 关闭弹框
          that.dialogFormVisible = false;
          that.loading = true;
          // 修改菜品接口对接
          http.post(api.goodsEdit, {
            id:that.currentGoodsId,
            restaurant_id: this.$route.query.id,
            seller_id:localStorage.getItem("seller_id"),
            goods_name:that.restaurantInfo.name,
            recommend:that.restaurantInfo.radioRecommend,
            cid:that.restaurantInfo.currentGoodsCid,
            kitchen_id: that.restaurantInfo.currentCkid,
            goods_img:that.img,
            price:that.restaurantInfo.price,
            number:that.restaurantInfo.nub,
            putaway:that.restaurantInfo.putaway
          }, (res) => {
            console.log(res);
            that.loading = false;
            if(res.code == 10001) {
              this.$message({
                type: 'success',
                message: '修改菜品成功!'
              });
              that.getGoodsAllList();
            } else {
              this.$message({
                type: 'info',
                message: res.msg
              });
            }
          }, () => {
            that.loading = false;
            console.log('网络错误');
          });
          
          }).catch(() => {
          console.log(2);
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
          // 关闭弹框
          this.dialogFormVisible = false;
        }); 
      }
    },
    // 食品分类点击事件
    mListClassClick (e) {
      console.log(e)
      this.mListClassActive = e;
      console.log(this.mListClassActive); 
    },
    // 获取分类商品组合接口
    getGoodsAllList(){
      http.get(api.goodsAllList, {
        seller_id: localStorage.getItem("seller_id"),
        restaurant_id:this.$route.query.id
      }, (res) => {
        
        res.data.forEach(function (ele) {
          ele.num = 0;
          ele.goods.map(item => {
            item.num = 0;
          });
        })
        this.mList = res.data;
        
      }, (err) => {
        console.log(err);
        
      }); 
    },
    // 获取厨房商品组合接口
    getkitchenList(){
      http.get(api.kitchenList, {
        seller_id: localStorage.getItem("seller_id"),//api.seller_id,
        current_page: 1,
        perpage: 50
      }, (res) => {
        console.log('获取厨房商品组合接口');
        console.log(res)
        this.cList = res.data.data;
        console.log(this.cList)
      }, (err) => {
        console.log(err);
      }); 
    },
    login () {
      this.$router.push('login')
    },
		addRestaurant () {
		  this.$router.push('add-restaurant')
    },
    // 新增餐品模态窗
    addMealFood () {
      this.dialogFormVisible = true;
      this.foodType = 1;
      // 当前点击的id
      this.currentGoodsId = '';
      this.restaurantInfo.currentGoodsCid = '';
      this.restaurantInfo.name = '';
      this.restaurantInfo.price = '';
      this.restaurantInfo.nub = '';
      this.img = '';
      this.restaurantInfo.currentCkid = '';
    },
    // 修改餐品模态窗
    updataMealFood (id,cid,goodsName,price,number,img,ckid,recommend,putaway) {
      this.dialogFormVisible = true;
      this.foodType = 2;
      // 当前点击的id
      this.currentGoodsId = id;
      this.restaurantInfo.currentGoodsCid = cid;
      this.restaurantInfo.name = goodsName;
      this.restaurantInfo.price = price;
      this.restaurantInfo.nub = number;
      this.img = img;
      this.restaurantInfo.currentCkid = ckid;
      this.restaurantInfo.radioRecommend = recommend.toString();
      this.restaurantInfo.putaway = putaway.toString();
    },
    //执行子组件触发的事件
    getChildData (val) {
      this.mList = val;
    },
    // 删除的时候菜品分类选中默认为0，否则列表循环得不到最后一个对象的goods属性
    getChildMListClassActive (val) {
      this.mListClassActive = val;
    }

  }
}
</script>

<style scoped>
.add-btn-restaurant {
  width: 90px;
  float:left;
  cursor: pointer;
  color:#FF7537;
}
.contain {
  font-size: 16px;
  color:#333;
}
.add-restaurant {
  margin: 20px 0 15px 0;
  height: 50px;
  background-color: #fff;
  line-height: 50px;
  padding-left: 25px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
}
/* 餐品管理 */
.manage {
  /* border: 1px solid red; */
  padding: 0 25px 23px 25px;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
}
.manage-info {
  border-bottom:1px solid #EFEFEF;
  padding: 14px 0 16px 0;
  box-sizing: border-box;
  height:50px;
}
.dish-info {
  font-size: 20px;
  padding-right: 25px;
  float: left;
  
}
.manage-info .dish-add {
  color:#FF7537;
  cursor:pointer;
}
.manage-info img{
  cursor: pointer;
}
/* 时间推荐表 */
.food-table {
  padding: 15px 0;
}
.food-table-time {
  color: #FF6F2E;
  border-bottom: 1px solid #FF6F2E;
}
.san_xia {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #FF6F2E;
}
/* 卡片部分 */
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.image {
  width: 100%;
  display: block;
}
.posi-img {
  position: absolute;
  top: -10px;
  right: -12px;
  width:25px;
  height:25px;
  cursor: pointer;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.el-col-offset-2 {
  margin-left: 3%!important;
  margin: 5px 0;
}
/* 按钮 */
.mark-btn { 
  margin:50px 0 193px 0;
}
.btn {
  width: 480px;
  margin: 0 auto;
}
.btn-type {
  display: inline-block;
  width: 200px;
  border: 1px solid #FF6F2E;
  border-radius: 5px;
  color: #FF6F2E;
  padding: 12px 83px;
  box-sizing: border-box;
  background-color: #FFF1E5;
}
.determine {
  margin-right:40px;
}
/* 对话框内容 */
/deep/.el-dialog__wrapper .el-dialog__body {
  padding: 0 0 ; 
}
.dialog-border {
  /* border: 1px solid red; */
  padding: 0 20px 30px 20px;
}
.dialog-tip {
  margin-left: 15px;
  color: #999;
}
.current-time {
  color: #FF1C1C;
  margin-top: 15px;
}
.bor-area {
  /* border: 1px solid black; */
  margin: 15px 0;
}
.bor-area-title {
  width: 100px;
  display: inline-block;
  text-align: right;
  font-size: 16px;
  color: #333;
  margin-right: 15px;
  /* border: 1px solid red; */
}
.bor-width {
  width: 128px;
}
.recommend {
  /* margin:24px; */
}
.isrecommend {
  margin-right:42px;
}
/* 对话框中上传图片 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/deep/.avatar-uploader  .avatar-uploader-icon {
  width: 200px;
  height: 120px;
  line-height: 120px;
}
/deep/.avatar-uploader .el-dialog__body img {
  width: 200px;
  height: 120px;
}
.make-sure {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  margin: 0 auto;
  border: 1px solid #FF6F2E;
  color: #FF6F2E;
  background-color: #FFF1E5;
}
/* 对话框按钮 */
.dialog-btn-area {
  /* border: 1px solid black; */
  margin: 0 auto;
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.dialog-make-sure {
  display: inline-block;
  border: 1px solid #FF6F2E;
  width: 200px;
  height: 40px;
  color: #FF6F2E;
  background-color: #FFF1E5; 
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
}
.dialog-btn-delete {
  margin-right: 60px;
}
/* 选择菜品样式 */
.select-menu-main {
  display:flex;
  margin-top:5px;
  border-radius: 5px;
  border:1px solid #e7e7e7;
  z-index:10;
  font-size:14px;
}
.select-menu-main .left::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .left::-o-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .left::-moz-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .left::-moz-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .right::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .right::-o-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .right::-moz-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .right::-moz-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .left{
  width:70px;
  background: #F3F3F3;
  border:5px 0 0 5px;

}
.select-menu-main .left .active-menu {
  background:#fff;
}
.select-menu-main .left .active-menu :first-child {
  border:5px 0px 0px 0px;
}
.select-menu-main .left .active-menu :last-child {
  border:0px 0px 0px 5px;
}
.select-menu-main .left .leftline {
  position: relative;
  line-height:40px;
  cursor: pointer;
}
.category-nums {
  position: absolute;
  right: 0px;
  top: 5px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(to right, #FD9A29, #FF5127);
  font-size: 10px;
  color: #fff;
  line-height: 16px;
}
.select-menu-main .right {
  flex:1;
  padding:15px;
  box-sizing: border-box
}
.select-menu-main .left,.select-menu-main .right{
  overflow-x: hidden;
  overflow-y:scroll;
  height:340px;
}
.menu-list {
  position: relative;
  width:130px;
  height:210px;
  border-radius:2px;
  border:1px solid rgba(221,221,221,1);
  margin:0 30px 30px 0;
  float:left;
  font-size:14px;
  color:#333;
}
.menu-list img.menu-top-img{
  width:130px;
  height:130px;
}
.menu-list-main{
  padding:8px 10px;
  box-sizing: border-box
}
.menu-list-last-nub{
  font-size:10px;
  color:#999;
  margin-top:2px;
}
.menu-list-main-title {
  max-height:38px;
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2; 
}
.menu-list-last-nub span.number{
  font-size:14px;
  color:#333
}
.select-menu-main .right .menu-list:last-child {
   margin-right:0px;
}
.menu-list-left,.menu-list-left img{
  width:60px;
  height:60px;
}
.menu-list-center{
  flex:1;
  padding:0 15px;
  color:#333;
  font-size:16px;
}
.select-menu-title,.s-list-count{
  color:#333;
  font-size:16px;
}
.select-menu-title span.numPrice,.s-list-count span.numPrice {
  font-weight: bold;
}
.select-menu-title span.distance,.s-list-count span.distance {
  margin-left:10px;
}
.select-menu-title-count {
  padding-top:10px;
}
.menu-list-right i  {
  font-size:22px;
  color:#FF6F2E;
  cursor: pointer;
}
.menu-list-right{
  padding-top:15px;
  box-sizing: border-box
}
.menu-list-right span{
  font-size:16px;
  color:#333;
  margin:0 5px;
  position: relative;
  top:-2px;
}
.menu-list-center .goods-name{
  margin-bottom:10px;
}
.d-i-d-nub {
  position: absolute;
  top:0px;
  right:10px;
  width:80px;
  font-size:14px;
  color:#999;
}
.d-i-d-nub .nub{
  color:#333;
}
.img-border{
  position: relative;
  width:200px;
  height:120px;
  border-radius:5px;
  border:1px solid rgba(221,221,221,1);
  font-size:80px;
  margin-top:35px;
  color:#999;
  margin-left:145px;
  margin-top:-20px;
  cursor: pointer;
}
.avatar-uploader{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  opacity: 0;
}
.imgshow{
  width:200px;
  height:120px; 
}
</style>

